<template>
  <div class="information">
    <div class="collection_title">
      <titleText title="我的收藏"></titleText>
      <div class="operation">
        <template v-if="!isEdit">
          <span @click="edit">编辑</span>
        </template>
        <template v-else>
          <span @click="selectAll">全选</span>
          <span class="complete" @click="completeEdit">完成</span>
        </template>
      </div>
    </div>
    <div class="collect_list" v-loading="loading">
      <div
        class="course_item"
        v-for="(item, index) in collectList"
        :key="index"
      >
        <div class="course_img" @click="goDetails(item.freecourselist_id)">
          <el-image fit="cover" :src="item.fengmiantu" :lazy="true" />
        </div>
        <div class="course_text" @click="goDetails(item.freecourselist_id)">
          <div class="course_title">
            {{ item.freecourselist_kechengbiaoti }}
          </div>
          <div class="course_tip">
            {{ item.kechengjianjie }}
          </div>
          <div class="course_price">
            <div class="price_1" v-if="item.shoujia == 0">免费</div>
            <div class="price_2" v-else>¥{{ item.shoujia }}</div>
            <div class="course_name">{{ item.xunixuexirenshu }}人已学习</div>
          </div>
        </div>
        <div v-if="isEdit" class="mask_view" @click="selectItem(index)">
          <img v-if="item.isSelect" src="../../assets/default/1.png" alt="" />
          <img v-else src="../../assets/default/2.png" alt="" />
        </div>
      </div>
    </div>
    <div class="no_data" v-if="collectList.length == 0 && !loading">
      <img class="no_img" src="../../assets/default/12.png" alt="" />
    </div>
    <div class="margin_top">
      <paging
        :total="total"
        :pageSize="pageSize"
        @pageChange="pageChange"
      ></paging>
    </div>
    <div class="save_btn" @click="delCollect" v-if="isEdit">删除</div>

    <modalText
      ref="modal"
      text="确认删除该课程吗？"
      tip="提示"
      @confirm="modaConfirm"
    ></modalText>
  </div>
</template>


<script name="myCollection" setup>
import { post65e5b0d61d74c, post662795550162a } from "@/utils/api.js";
import titleText from "./titleText.vue";
import paging from "@/components/paging.vue";
import modalText from "@/components/modalText.vue";
import { ref, reactive, onMounted, inject } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const injectMessage = inject("$message");

onMounted(() => {
  getList();
});

let collectList = ref([]);
let total = ref(0);
let loading = ref(true);
let pageNum = ref(1);
let pageSize = ref(9);
function getList() {
  ids.value = [];
  post65e5b0d61d74c({
    page: pageNum.value,
    list_rows: pageSize.value,
  }).then((res) => {
    // console.log(res);
    loading.value = false;
    if (res.code == 1) {
      total.value = res.data.total;
      collectList.value = res.data.data;
    }
  });
}
// 分页
function pageChange(page) {
  pageNum.value = page;
  loading.value = true;
  getList();
}

let isEdit = ref(false);
function edit() {
  isEdit.value = true;
}
function completeEdit() {
  isEdit.value = false;
}

function selectItem(index) {
  // 选中
  if (isEdit.value) {
    collectList.value[index].isSelect = !collectList.value[index].isSelect;
  }
}
function selectAll() {
  // 全选
  if (isEdit.value) {
    collectList.value.forEach((item) => {
      item.isSelect = true;
    });
  }
}

let modal = ref(null);
let ids = ref([]);
function delCollect() {
  collectList.value.forEach((item) => {
    if (item.isSelect) {
      ids.value.push(item.aid);
    }
  });
  if (ids.value.length == 0) {
    injectMessage.error("请选择课程");
    return;
  }
  modal.value.openModal();
}

function modaConfirm() {
  post662795550162a({
    ids: ids.value.join(","),
  })
    .then((res) => {
      if (res.code == 1) {
        injectMessage.success("删除成功");
        ids.value = [];
        isEdit.value = false;
        loading.value = true;
        getList();
      }
    })
    .catch((err) => {
      injectMessage.error(err.msg);
    });
}
function goDetails(aid) {
  router.push({
    path: "/details",
    query: {
      aid: aid,
    },
  });
}
</script>

<style lang="scss" scoped>
.information {
  padding: 18px 16px;
  background: #fff;
  min-height: 437px;
  .collection_title {
    position: relative;
    .operation {
      display: inline-block;
      position: absolute;
      right: 0;
      top: -7px;
      span {
        font-size: 10px;
        margin-left: 20px;
        cursor: pointer;
      }
      .complete {
        color: #1f52ae;
      }
    }
  }
  .collect_list {
    overflow: hidden;
    padding-top: 16px;
    .course_item {
      float: left;
      width: 168px;
      height: 171px;
      background: #fff;
      margin: 0 16px 16px 0;
      cursor: pointer;
      position: relative;
      .course_img {
        width: 168px;
        height: 90px;
        .el-image {
          width: 100%;
          height: 100%;
        }
      }
      .course_text {
        padding: 4px 7px 0;
        .course_title {
          height: 28px;
          font-size: 9px;
          font-weight: 500;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }
        .course_tip {
          font-size: 8px;
          color: #666;
          margin-top: 5px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
        }
        .course_price {
          margin-top: 6px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .price_1 {
            color: #62ce96;
            font-size: 10px;
            font-weight: bold;
          }
          .price_2 {
            color: #f43024;
            font-size: 10px;
            font-weight: bold;
          }
          .course_name {
            font-size: 8px;
            color: #999;
          }
        }
      }
      .mask_view {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        z-index: 10;
        img {
          width: 14px;
          height: 14px;
          position: absolute;
          right: 8px;
          top: 8px;
        }
      }
    }
    .course_item:nth-child(3n + 3) {
      margin-right: 0;
    }
  }
}
.margin_top {
  margin-top: 8px;
}
.save_btn {
  width: 120px;
  height: 24px;
  background: #1f52ae;
  font-size: 8px;
  color: #fff;
  border-radius: 3px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>